<template>
  <div>
    <el-form status-icon :model="datas" ref="searchForm">
      <el-row :gutter="10">
        <el-col :span="22">
          <el-col :span="6">
            <el-form-item prop="project_name">
              <el-input
                size="medium"
                v-model="datas.project_name"
                placeholder="请输入项目名称"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="project_pmname">
              <el-input
                size="medium"
                v-model="datas.project_pmname"
                placeholder="请输入项目经理"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="stage_id">
              <el-select size="medium" clearable v-model="datas.stage_id" placeholder="请选择项目阶段">
                <el-option
                  v-for="item in stageData"
                  :key="item.name+item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="project_status">
              <el-select
                size="medium"
                clearable
                v-model="datas.project_status"
                placeholder="请选择项目状态"
              >
                <el-option
                  v-for="item in stausData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="project_level">
              <el-select
                size="medium"
                clearable
                v-model="datas.project_level"
                placeholder="请选择优先级别"
              >
                <el-option
                  v-for="item in levelDatas"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="is_check">
              <el-select size="medium" clearable v-model="datas.is_check" placeholder="请选择是否考核">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item prop="start_time">
              <el-date-picker
                v-model="datas.start_time"
                type="daterange"
                range-separator="至"
                start-placeholder="创建开始日期"
                end-placeholder="创建结束日期"
                value-format="yyyy-MM-dd"
                style="width:100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item prop="end_time">
              <el-date-picker
                v-model="datas.end_time"
                type="daterange"
                range-separator="至"
                start-placeholder="结束开始日期"
                end-placeholder="结束结束日期"
                value-format="yyyy-MM-dd"
                style="width:100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item prop="name">
              <el-select
                size="medium"
                v-model="datas.name"
                collapse-tags
                placeholder="请输入关键字搜索"
                style="width: 100%;"
                filterable
                remote
                :remote-method="(val)=>{getUserList(val)}"
              >
                <el-option
                  v-for="(item,index) in userDatas"
                  :key="item.id+'qww'+index"
                  :label="item.realname"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>-->
        </el-col>
        <el-col :span="2">
          <el-button
            style="margin-top:5px;"
            size="small"
            :type="'primary'"
            @click.native="save()"
          >查询</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { Message } from "element-ui";
import API from "@apis/newProject";
import stageAPI from "@apis/projectStage";

export default {
  name: "searchForm",
  props: {
    saveForm: Function,
  },
  data() {
    return {
      datas: {
        project_name: "",
        project_pmname: "",
        stage_id: "",
        project_status: "",
        project_level: "",
        is_check: "",
        start_time: "",
        end_time: "",
      },
      userDatas: [],
      stageData: [],
      stausData: [
        {
          label: "未开始",
          value: -2,
        },
        {
          label: "异常",
          value: -1,
        },
        {
          label: "正常",
          value: 1,
        },
        {
          label: "暂停",
          value: 2,
        },
        {
          label: "试运行",
          value: 3,
        },
        {
          label: "运维",
          value: 4,
        },
        {
          label: "结束",
          value: 5,
        },
      ],
      levelDatas: [
        { label: "A", value: "A" },
        { label: "B", value: "B" },
        { label: "C", value: "C" },
      ],
    };
  },
  computed: {},
  created() {
    this.getList();
  },
  methods: {
    //项目阶段数据
    getList() {
      stageAPI
        .getList()
        .then((res) => {
          this.stageData = [...res.list];
        })
        .catch((err) => {
          this.stageData = [];
          this.$message.error(err.message);
        });
    },
    reSet() {
      this.$refs.searchForm.resetFields();
    },
    async getUserList(word = "") {
      if (word == "") {
        return;
      }
      await API.getUserList({ page: this.userPage, keyword: word })
        .then((res) => {
          let oldIDs = this.userDatas && this.userDatas.map((item) => item.id);
          let newData = [...res.data, ...this.userDatas];
          newData.forEach((item) => {
            if (oldIDs.indexOf(item.id) < 0) {
              this.userDatas.unshift(item);
            }
          });
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    cancel() {
      this.$emit("update:visible", false);
      this.$refs.editForm.resetFields();
    },
    close() {
      this.cancel();
    },
    save() {
      // console.log(this.datas, "datas");
      this.$emit("saveForm", { ...this.datas });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 10px !important;
}
.el-input__inner {
  height: 36px !important;
  margin-top: 2.5px;
}
</style>